<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学习 vue</title>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 
			小结
			深度监视：
			（1）.Vue中的watch默认不监测对象内部值的改变（一层）
			（2）.配置deep:true可以监测对象内部值改变（多层）
			备注：
			（1）.Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
			（2），使用watch时根据数据的具体结构，决定是否采用深度监视。
			

		 -->
		<!-- 创建容器 -->
		<div id="root">
			<h3>a的值是：{{numbers.a}}</h3>
			<button type="button" @click="numbers.a++">点我a++</button>
		</div>

		<script type="text/javascript">
			Vue.config.productionTip = false

			//创建vue实例
			const vm = new Vue({
				el: '#root',
				data: {
					isHot: true,
					numbers:{
						a:1,
						b:1
					}
				},
				methods: {
					changeweather() {
						this.isHot = !this.isHot
					}
				},
				computed: {
					info() {
						return this.isHot ? '炎热' : '凉爽'
					}
				},
				watch:{	
					//监视多级结构中某个属性的变化，使用字符串形式展示
					'numbers.a':{
						handler(){
							console.log('a改变了')
						}
					},
					//监视多级结构中所有属性的变化,无论a还是b改变，都能被监视到，在数据庞大时，deep的作用非常大
					numbers:{
						deep:true,//深度监测
						handler(){
							console.log('number改变了')
						}
					}
				}
			})
	

		</script>
	</body>
</html>
